<template>
  <div class="app-container">
    <PropTable
      ref="tableData"
      :loading="loading"
      :columns="column"
      :data="data"
      @reset="reset"
      @onSubmit="onSubmit"
      :unadd="false"
      :excel="true"
      @exportExcelAction="downloadExcel"
    >
      <template v-slot:operation="scope">
        <el-button type="primary" size="small" icon="Position" @click="openPro(scope.row)">
          合同详情
        </el-button>
      </template>
    </PropTable>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, ref } from 'vue'
  import PropTable from '@/components/Table/PropTable/index.vue'
  import {
    postProjectGetAbstractAll,
    postProjectGetAbstractAllExcel,
  } from '@/api/controller/project-controller/index'
  import { exportExcel } from '@/utils/exprotExcel'
  import { useRouter } from 'vue-router'
  import { usePermissionStore } from '@/store/modules/permission'
  const PermissionStore = usePermissionStore()
  const pageInfo = ref({})
  const tableData = ref([])
  const loading = ref(true)
  const column = [
    { name: 'projectBrief', label: '项目简称', inSearch: true, valueType: 'input', width: 200 },
    { name: 'projectStatus', label: '项目状态', valueType: 'input', width: 110 },
    { name: 'collectionPrice', label: '销售合同总金额(元)', moneyType: true, width: 160 },
    { name: 'finishCollectionPrice', label: '已收(元)', moneyType: true, width: 130 },
    { name: 'leftCollectionPrice', label: '应收(元)', moneyType: true, width: 130 },
    { name: 'paidPrice', label: '采购合同总金额(元)', moneyType: true, width: 160 },
    { name: 'finishPaidPrice', label: '已付(元)', moneyType: true, width: 130 },
    { name: 'leftPaidPrice', label: '应付(元)', moneyType: true, width: 130 },
    { name: 'collectionRate', label: '回款率(%)', moneyType: true, width: 100 },
    { name: 'operation', slot: true, fixed: 'right', width: 120, label: '操作', type: false },
  ]
  const data = ref(null)
  const loadData = async (val) => {
    let res = await postProjectGetAbstractAll(val)
    data.value = res.data
  }

  const router = useRouter()
  const openPro = (row) => {
    PermissionStore.setCacheFlag(false)
    setTimeout(() => {
      router.push({
        name: 'contract',
        state: { projectNumber: row.projectNumber, id: row.id },
      })
    }, 100)
  }
  //重置搜索条件
  const reset = async () => {
    try {
      loading.value = true
      pageInfo.value = {
        pageNum: 1,
        pageSize: 15,
      }
      await loadData(pageInfo.value)
    } finally {
      loading.value = false
    }
  }
  //搜索
  const onSubmit = async (val) => {
    try {
      loading.value = true
      await loadData(val)
    } finally {
      loading.value = false
    }
  }
  //初始化
  onMounted(async () => {
    try {
      loading.value = true
      pageInfo.value = {
        pageNum: 1,
        pageSize: 15,
      }
      await loadData(pageInfo.value)
    } finally {
      loading.value = false
    }
  })

  const downloadExcel = async () => {
    let res = await postProjectGetAbstractAllExcel({}, { loading: true })
    exportExcel({
      column,
      data: res.data,
      filename: '项目金额统计',
      format: 'xlsx',
      autoWidth: true,
    })
  }
</script>

<style lang="scss" scoped>
  .app-container {
    flex: 1;
    display: flex;
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
  }
</style>
